{extend name="UserPhoto/myphoto" /}

{block name="addpic"}
<style>
    /*图片/画板 切换按钮*/
    .user-label-bottom .user-label-bl ul li:first-child a {
        font-weight: 400;
        /*color: #999;*/
    }

    .user-label-bottom .user-label-bl ul li:nth-child(3) a {
        font-weight: 700;
        color: #000;
    }

    .cut {
        border-bottom: 1px solid #999;
        padding: 20px 0;
    }

    .cut-caiji ul {
        display: inline-block;
        border: 1px solid #CCC;
        border-radius: 3px;

    }

    .cut-caiji ul li {
        float: left;
        font-size: 14px;
        padding: 4px 5px 4px 26px;
        background-color: #e6e6e6;
        cursor: pointer;
    }

    .cut-caiji ul li:first-child {
        border-right: 1px solid #CCC;
        background: url('/static/home/test/tab_sprite.png') -113px 8px no-repeat;
        background-position: 7px 7px;

    }

    .cut-caiji ul li:nth-child(2) {
        background: url('/static/home/test/tab_sprite.png') -113px 7px no-repeat;
        background-color: #e2e1e1;
    }

    .cut-caiji ul li:hover {
        background-position: -113px -53px
    }

    .cut-caiji ul li a:hover {
        color: #c90000;
    }

    .cut-caiji ul li a {
        display: inline-block;
        color: #000;
        text-decoration: none;
    }

    .clearfloat:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0
    }

    .clearfloat {
        zoom: 1
    }

    /*画板样式 大框*/
    .photo-al2 {
        width: 100%;
        padding-bottom: 200px;
        /*display: none;*/
    }

    .photo-tsty2 {
        margin-top: 15px;
        margin-left: 15px;
        width: 236px;
        height: 350px;
        background-color: #efefef;
        border-radius: 3px;
        -webkit-transition: box-shadow .5s, transform .5s, background-position .5s;
        cursor: pointer;
        position: relative;
    }

    .photo-tsty2:hover {
        box-shadow: 0px 4px 10px #999999;
        background: rgba(255, 255, 255, .5);
        transform: translate(0, -2px);
    }


    .photo-tsty2 .photo-x {
        width: 210px;
        height: 324px;
        border: 2px dashed #dedede;
        position: absolute;
        top: 13px;
        left: 13px;
    }

    .photo-tsty2 .photo-x i {
        display: block;
        width: 48px;
        height: 48px;
        background-image: url('/static/home/test/icon_add_rbig.png');
        background-repeat: no-repeat;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .photo-tsty2:hover i {
        background-position: center center;
    }


    .photo-as {
        background-color: #fff;
    }

    .photo-as {
        position: relative;
    }

    .photo-as .photo-pic {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 216px;
        height: 289px;
    }

    .photo-as .photo-pic .photo-pic-top {
        width: 216px;
        height: 216px;
        overflow: hidden;
        border: 1px #dbd4d4 solid;
    }

    .photo-as .photo-pic .photo-pic-top img {
        max-width: 100%;
    }

    .photo-as .photo-pic .photo-pic-top span {
        display: inline-block;
        color: #999;
        font-weight: 700;
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .photo-as .photo-pic .photo-pic-top .number {
        position: absolute;
        top: 188px;
        left: 8px;
        font-size: 12px;
        color: #fff;
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        background: rgba(0, 0, 0, .4);
        border-radius: 2px;
    }

    .photo-as .photo-pic .photo-pic-bottom a {
        float: left;
        width: 69px;
        height: 69px;
        overflow: hidden;
        margin: 3px 3px 3px 0;
        border: 1px #dbd4d4 solid;
    }

    .photo-as .photo-pic .photo-pic-bottom img {
        max-width: 100%;
    }

    .photo-as .photo-pic .photo-pic-bottom img:last-child {
        margin: 0;
    }

    .photo-as .photo-pic .photo-edit button {
        border: none;
        background-color: #ededed;
        text-align: center;
        border-radius: 2px;
        font-size: 14px;
        padding: 0 12px;
        height: 28px;
        line-height: 28px;
        width: 70px;
        margin-top: 10px;
        outline: none;
        float: right;
    }

    .photo-as .photo-pic .photo-edit button:hover {
        background-color: #d8d8d8;
    }

    .photo-tsty2 .photo-edit .user-name {
        float: left;
        margin-top: 10px;
    }

    .photo-tsty2 .photo-edit .user-name a img {
        width: 24px;
        height: 24px;
    }

    .photo-tsty2 .photo-edit .user-name a img:hover {
        opacity: 0.8;
    }

    .photo-tsty2 .photo-edit .user-name .name {
        display: inline-block;
        margin-left: 10px;
        color: #000;
        font-size: 13px;
    }

    .photo-tsty2 .photo-edit .user-name .name:hover {
        color: #c90000;

    }

    /*大框*/
</style>


<div class="container-fluid">
    <div class="cut-both cut">
        <div class="cut-caiji">
            <ul class="clearfloat" id="but-cut">
                <li><a href="{:url('home/userphoto/mylike')}">11 采集</a></li>
                <li><a href="{:url('home/userphoto/myboard')}">12 画板</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="photo-al2"></div>
{/block}

{block name="tupian"}
<script>
    $('#header_top_left_title li a').css({'color': 'black'});
    $('.header_ta').css({'background': '#fff'});
    $('#header_top_left_logo img').attr('src', '/static/home/images/logo.svg');
    $('#header_top_left_title .menu2').css({'background': 'url("/static/home/images/menu_sprite.svg") 0 -248px no-repeat;'});
    $('.search input').css({'background-color': 'rgba(96, 96, 96, 0.2)', 'border': '1px solid #000'});
    $('#rigister').css({'background-color': '#d9d9d9', 'color': '#444'});

    $(function () {
        // 瀑布流初始化
        var $container = $('.photo-al2');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.photo-tsty2',
                columnWidth: '.photo-tsty2',
                isResizeBound: true,
                isAnimated: true
            });
        });

        // 设置封面初始化
        var $carousel = $('.carousel').flickity()
            .flickity('next')
            .flickity('select', 4);
    });


    var dataInt = {
        'data': [
            {'src': '01c42c37c676b6d621dc4401662f9e4f59437bfa9de1c-88rSRR_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1d6781569238b14290ab5fb8094e3e0b143de28524b07-L9kIQR_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'}
        ]
    }

    // 判断首次进入页面应该显示的视图样式
    myboard();

    function myboard() {
        for (var i = 0; i < dataInt['data'].length; i++) {
            var $photopic =
                '<div class="photo-tsty2 photo-as">' +
                '<div class="photo-pic">' +
                '<div class="photo-pic-top">' +
                '<a href="#"><img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '"></a>' +
                '<span>画板标题</span>' +
                '<div class="number">22</div>' +
                '</div>' +
                '<div class="photo-pic-bottom">' +
                '<a href="#"><img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '"></a>' +
                '<a href="#"><img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '"></a>' +
                '<a href="#"></a>' +
                '</div>' +
                '<div class="photo-edit">' +
                '<div class="user-name">' +
                '<a href=""><img src="/static/home/test/fa5bcc780b9140e7db5e57cc893aa6166c91df76844841-IFBGrM_sq75sf.jfif"></a>' +
                '<a class="name" href="">我选压缩</a>' +
                '</div>' +
                '<button class="attention" yet-g="1">关注</button>' +
                '</div>' +
                '</div>' +
                '</div>';

            $('.photo-al2').append($photopic);
        }


        // 画板
        var $grid = $('.photo-al2').masonry({
            itemSelector: '.photo-tsty2',
            columnWidth: '.photo-tsty2',
            percentPosition: true,
        });
        $grid.imagesLoaded().progress(function () {
            $grid.masonry('layout');
        });
        // 关注按钮

        $('.attention').click(function () {
            if ($(this).attr('yet-g') == '1') {
                $(this).html('关注');
                $(this).attr('yet-g', '0');
            } else if ($(this).attr('yet-g') == '0') {
                $(this).html('已关注');
                $(this).attr('yet-g', '1');
            }
        });

    };


</script>
{/block}